<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="renderer" content="webkit">
    <title>模板表格</title>
    <link href="../static/dist/semantic.min.css" th:href="@{/dist/semantic.min.css}" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/layui.css" th:href="@{/css/layui.css}">
    <link href="../static/css/public.css" th:href="@{/css/public.css}" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/notiflix.min.css" th:href="@{/css/notiflix.min.css}">
    <style>
        .m-content {
            height: 42px;
        }

        .hide {
            display: none;
        }

        tr {
            text-align: center;
        }

        #myTable {
            table-layout: fixed;
            /*word-break:break-all;*/
        }

        #myTable tbody td {
            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;
        }

        .details {
            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;
        }

        .treatment-details {
            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;
        }

        .none {
            display: none;
        }

        .m-shadow-small {
            -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 2) !important;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 2) !important;
        }

        .end {
            pointer-events: none;
        }

        .red {
            background-color: red;
            display: block;
        }

        .green {
            background-color: green;
            display: block;
        }
    </style>
</head>
<body>

<nav class="ui inverted  attached  segment m-padded-tb-mini m-shadow-small">
    <div class="ui inverted secondary stackable menu" style="width: 93.7% !important;">
        <h2 class="ui teal header item" style="margin-left: 5.2%;font: italic 2em Georgia, serif;">Time-varying</h2>
        <a th:href="@{/index/none/main}" class="m-item item m-mobile-hide"><i class="edit  icon"> </i>生产计划</a>
        <a href="javascript:void(0)" id="craft" class="m-item  item m-mobile-hide"><i class="magic icon"> </i>工艺</a>
        <a href="javascript:void(0)" id="hours" class="m-item item m-mobile-hide admin"><i
                class="street view icon"> </i>工时管理</a>
        <a href="javascript:void(0)" id="report" class="m-item head-item item m-mobile-hide"><i
                class="sticky note outline icon"> </i>异常上报</a>
        <a href="javascript:void(0)" id="view-exception" class="m-item head-item item m-mobile-hide"><i
                class="eye icon"> </i>异常查看</a>
        <a href="javascript:void(0)" class="m-item  item m-mobile-hide" id="view-modify-record"><i class="eye icon"></i>修改记录</a>
        <a href="javascript:void(0)" class="m-item  item head-item m-mobile-hide" id="export"><i
                class="download icon"></i>导出excel</a>
        <a href="javascript:void(0)" class="m-item item head-item m-mobile-hide" id="completion" th:if="${status}"><i
                class="strikethrough icon"></i>发起完工</a>
        <!--        <a href="javascript:void(0)" class="m-item item head-item m-mobile-hide" id="start-production"-->
        <!--           th:if="${status}"><i-->
        <!--                class="share alternate square icon"></i>开始生产</a>-->
        <!--        <a href="javascript:void(0)" class="m-item item head-item m-mobile-hide" id="end-production"-->
        <!--           th:if="${status}"><i-->
        <!--                class="share alternate icon"></i>结束生产</a>-->
        <!--        <div class="item" th:if="${status}">-->
        <!--            <div style="width: 20px;height: 20px;border-radius: 20px;" id="production-light"></div>-->
        <!--            <span id="status-text" style="color: whitesmoke;font-size: 12px;-->
        <!--    margin-top: 10px;"></span>-->
        <!--        </div>-->
        <div class="right m-item m-mobile-hide menu">
            <div class="ui dropdown item">
                <div class="text">
                    <img class="ui avatar image" src="../static/image/test.jpg" th:src="@{/image/test.jpg}">
                    Hi~ <span id="real-name"></span>
                </div>
                <i class="dropdown icon"></i>
                <div class="menu">
                    <a href="#" th:href="@{/logout}" class="item">注销</a>
                </div>
            </div>
        </div>
    </div>
</nav>
<input type="hidden" id="workOrderNumber" th:value="${workOrderNumber}">
<input type="hidden" id="status" th:value="${status}">
<div class="m-padded-lr">
    <div class="ui container m-container"
         style="width: 100%!important;float: right !important;">
        <div id="template-data">
            <div class="ui top attached">
                <div class="ui  horizontal link list" style="width: 100vw;height: 7.5vw">
                    <div class="item" style="position: fixed;">
                        <textarea id="content"
                                  style=" width: 82vw;height: 7vw;font-size: 26px;text-indent: calc(1.5 * 14px);"
                                  readonly="readonly"></textarea>
                    </div>
                    <div class="item" style="position:fixed;right:7px;margin-top: 95px;" th:if="${status}">
                        <button class="ui positive button" id="newTrBtn">新增一行</button>
                    </div>
                    <div class="item" style="position:fixed;right:137px;margin-top: 95px;">
                        <span id="total" style="color: black;font-weight: bold;"></span>
                        <button class="ui teal button" id="remTrBtn" th:if="${status}">删除一行</button>
                    </div>
                    <div class="item" id="se-template"
                         style="position:fixed;float: right;margin-top: 20px;margin-left: 85vw;">
                        <div class="ui search selection dropdown">
                            <input name="templateId" id="templateId" type="hidden">
                            <div class="default text" id="default-text" style="color: black;" data-value="0">请选择工单</div>
                            <i class="dropdown icon"></i>
                            <div class="menu" id="temp-menu" th:if="not ${#lists.isEmpty(template)}">
                                <div class="item" th:each="item:${template}"
                                     th:data-value="${item.templateId}"><span
                                        th:text="${item.templateName}"></span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui attached">
                <table class="ui striped celled table" style="margin-top: 0;" id="myTable">
                    <thead>
                    <tr style="text-align: center">
                        <th id="title"></th>
                    </tr>
                    <tr>

                    </tr>
                    <tr>

                    </tr>
                    <tr>

                    </tr>

                    <tr>

                    </tr>
                    </thead>

                    <tbody>
                    <tr class="identity">
                    </tr>

                    </tbody>

                    <tfoot>

                    </tfoot>
                </table>
                <!--                <div class="item" style="float: right;margin-top: 20px;margin-right: 40px;" th:if="${status}">-->
                <!--                    <button class="ui positive button" id="submit">提交</button>-->
                <!--                </div>-->
            </div>
        </div>
        <div id="exception-data" class="none">
            <div style="float: left;width: 4em;margin-top: 200px;">
                <div class="ui vertical menu m-container-mini" style="font-size: 1.2em;">
                    <div class="item">
                        <div class="header" style="color: teal">异常处理</div>
                        <div class="menu">
                            <a class="item left-item exception-history" data-tooltip="异常历史"
                               data-position="right center">异常历史</a>
                            <a class="item left-item active pending-exception" data-tooltip="待处理异常"
                               data-position="right center">待处理异常</a>
                            <a class="item left-item pending-execute" data-tooltip="待执行异常"
                               data-position="right center">待执行异常</a>
                            <a class="item left-item pending-sure" data-tooltip="待确认异常"
                               data-position="right center">待确认异常</a>
                            <a class="item left-item view-data" data-tooltip="返回制程"
                               data-position="right center">返回制程</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ui attached" style="width: 70%;float: right;margin-right: 200px;margin-top: 100px;"
                 id="pending">
                <table class="ui striped celled table" id="pending-table">
                    <thead>
                    <tr>
                        <th>序列码</th>
                        <th>产品型号</th>
                        <th>产品编码</th>
                        <th class="hide">异常信息</th>
                        <th>上报人</th>
                        <th>上报时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
            <div class="ui attached none" style="width: 80%;float: right;margin-right: 150px;margin-top: 100px;"
                 id="confirmed">
                <table class="ui striped celled table" id="confirmed-table">
                    <thead>
                    <tr>
                        <th>序列码</th>
                        <th>产品型号</th>
                        <th>产品编码</th>
                        <th class="hide">异常信息</th>
                        <th>上报人</th>
                        <th>上报时间</th>
                        <th class="hide">处理方案</th>
                        <th>闭环人</th>
                        <th>闭环时间</th>
                        <th class="hide">执行结果</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
            <div class="ui attached none" style="width: 90%;float: right;margin-right: 20px;margin-top: 70px;"
                 id="finished">
                <div class="ui  horizontal link list">
                    <div class="item">
                        <div class="ui search">
                            <div class="ui left icon input">
                                <input class="prompt" type="text" id="search-text" placeholder="Search Exception info"
                                       style="width: 20em;">
                                <i class="search icon"></i>
                                <div class="ui positive button search-exception">查询</div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <button class="ui olive button" id="export-exception-info">导出</button>
                    </div>
                    <div class="item">
                        <a id='reload-exception-info' style="color: #0C0C0C"><i class='sync alternate icon'></i>刷新</a>
                    </div>
                </div>
                <table class="ui striped celled table" id="finished-table">
                    <thead>
                    <tr>
                        <th>序列码</th>
                        <th>产品型号</th>
                        <th>产品编码</th>
                        <th class="hide">异常信息</th>
                        <th>上报人</th>
                        <th>上报时间</th>
                        <th class="hide">处理方案</th>
                        <th>闭环人</th>
                        <th>闭环时间</th>
                        <th>执行人</th>
                        <th>执行时间</th>
                        <th class="hide">执行结果</th>
                        <th>确认人</th>
                        <th>确认时间</th>
                        <th>状态</th>
                        <th class="identity">操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

        <div class="ui modal view-exception-modal">
            <div class="header">异常信息</div>
            <i class="close icon"></i>
            <div class="ui form segment">
                <div class="field">
                    <label>结果详情</label>
                    <div class="ui segment" style="overflow:auto;height: 100px;width: 95%;">
                        <span id="exception-details"></span>
                    </div>
                </div>
                <div class="field">
                    <button class="ui red button" id="download-ex-file">异常信息附件下载</button>
                </div>
            </div>
        </div>

        <div class="ui modal view-treatment-modal">
            <div class="header">处理方案</div>
            <i class="close icon"></i>
            <div class="ui form segment">
                <div class="field">
                    <label>方案详情</label>
                    <div class="ui segment" style="overflow:auto;height: 100px;width: 95%;">
                        <span id="plan-details"></span>
                    </div>
                </div>
                <div class="field">
                    <button class='ui olive button' id="dix-download">方案附件下载</button>
                </div>
            </div>
        </div>

        <div class="ui modal view-execute-modal">
            <div class="header">执行结果</div>
            <i class="close icon"></i>
            <div class="ui form segment">
                <div class="field">
                    <label>执行结果</label>
                    <div class="ui segment" style="overflow:auto;height: 100px;width: 95%;">
                        <span id="execute-details"></span>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" id="exception-id">
        <div class="ui modal handle-modal">
            <div class="header">异常处理</div>
            <i class="close icon"></i>
            <form class="ui form segment" enctype="multipart/form-data" id="solution-form" autocomplete="off"
                  onsubmit="return false">
                <div class="field">
                    <label>处理方案</label>
                    <textarea id="treatment-plan" cols="30" rows="5">

                    </textarea>
                </div>
                <div class="field">
                    <label>请选择附件上传</label>
                    <input type="file" id="dix-file">
                </div>
                <!--                <div class="field">-->
                <!--                    <label>是否为重大异常</label>-->
                <!--                    是:<input type="radio" name="checkT" value="1">-->
                <!--                    否:<input type="radio" name="checkT" value="2">-->
                <!--                </div>-->
                <div class="ui solution reset button">重置</div>
                <div style="float: right;">
                    <div class="ui positive submit button" id="sub-solution-btn">提交</div>
                </div>
            </form>
        </div>

        <div class="ui modal execute-modal">
            <div class="header">执行结果</div>
            <i class="close icon"></i>
            <form class="ui form segment" id="execute-form" autocomplete="off" onsubmit="return false">
                <div class="field">
                    <label>执行结果</label>
                    <textarea id="execute-result" cols="30" rows="5">

                    </textarea>
                </div>
                <div class="ui solution reset button">重置</div>
                <div style="float: right;">
                    <div class="ui positive submit button" id="sub-execute-btn">提交</div>
                </div>
            </form>
        </div>

        <div class="ui modal report-exception">
            <div class="header">异常上报</div>
            <i class="close icon"></i>
            <form class="ui form segment" id="report-form" onsubmit="return false" autocomplete="off">
                <div class="field">
                    <label>机器序列码</label>
                    <input type="text" id="serialNumber" name="serialNumber" placeholder="请填写机器序列码 例:PCBA序列码">
                </div>
                <div class="field">
                    <label>产品型号</label>
                    <input type="text" id="productNumber" name="productNumber" placeholder="请填写产品型号">
                </div>
                <div class="field">
                    <label>产品编码</label>
                    <input type="text" id="productCode" name="productCode" placeholder="请填写产品编码">
                </div>
                <div class="field">
                    <label>异常信息</label>
                    <textarea rows="6" cols="40" style="text-indent: 1em;" placeholder="请填写异常信息" id="exceptionInfo"
                              name="exceptionInfo"></textarea>
                </div>
                <div class="field">
                    <label>上传附件</label>
                    <input type="file" id="report-file" name="file">
                </div>
                <div class="ui clear-exception-info clear button">重置</div>
                <div style="float: right;">
                    <div class="ui positive submit button" id="report-exception-subBtn">提交</div>
                </div>
            </form>
        </div>

    </div>
</div>
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/dist/semantic.min.js" th:src="@{/dist/semantic.min.js}"></script>
<script src="../static/js/init.js" th:src="@{/js/init.js}"></script>
<script src="../static/js/laydate.min.js" th:src="@{/js/laydate.min.js}"></script>
<script src="../static/js/layui.js" th:src="@{/js/layui.js}"></script>
<script src="../static/js/notiflix.min.js" th:src="@{/js/notiflix.min.js}"></script>
<script src="../static/js/notiflix-aio.min.js" th:src="@{/js/notiflix-aio.min.js}"></script>
<script src="../static/js/public.js" th:src="@{/js/public.js}"></script>
<script src="../static/js/jquery-table2.js" th:src="@{/js/jquery-table2.js}"></script>
<script src="../static/js/jquery.fileDownload.min.js" th:src="@{/js/jquery.fileDownload.min.js}"></script>
<script src="../static/js/template.js" th:src="@{/js/template.js}"></script>

</body>
</html>